﻿@model ProductDetailsModel

@{
    <script asp-location="Footer" asp-order="300" asp-src="/Plugins/Theme.Modern/Content/script/medium-zoom.min.js"></script>
}
<b-col xl="7" lg="6" md="5" cols="12" class="px-0">
    @if (!string.IsNullOrEmpty(Model.Flag))
    {
        <div class="product-label">
            @Html.Raw(Model.Flag)
        </div>
    }
    <div class="gallery">
        <template>
            <div id="ppslider" class="gallery-slider">
                <template>
                    <!-- swiper1 Thumbs -->
                    <swiper class="swiper gallery-thumbs" :options="ppslider.swiperOptionThumbs" ref="swiperThumbs">
                        @foreach (var picture in Model.PictureModels)
                        {
                            <swiper-slide>
                                <img src="@picture.ThumbImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
                            </swiper-slide>
                        }
                    </swiper>
                    <!-- swiper2 Main -->
                    <swiper class="swiper gallery-top" :options="ppslider.swiperOptionTop" ref="swiperTop">
                        @foreach (var picture in Model.PictureModels)
                        {
                            <swiper-slide>
                                <img src="@picture.ImageUrl" data-srcs="@picture.ImageUrl" data-zoom-src="@picture.FullSizeImageUrl" alt="@picture.AlternateText" title="@picture.Title"/>
                                @if (Model.DefaultPictureZoomEnabled)
                                {
                                    <div class="zoom-button" onclick="zoomImg(this)">
                                        <span class="icons icon-frame"></span>
                                    </div>
                                }
                            </swiper-slide>
                        }
                        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
                    </swiper>
                </template>
            </div>
        </template>
    </div>
</b-col>
<script asp-location="Footer" asp-order="301">
    Vue.use(VueAwesomeSwiper)
    var ppslider = new Vue({
        el: '#ppslider',
        data() {
            return {
                Model: @Json.Serialize(Model),
                swiperOptionTop: {
                    loop: true,
                    loopedSlides: 4, // looped slides should be the same
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '#ppslider .swiper-button-next',
                        prevEl: '#ppslider .swiper-button-prev'
                    },
                },
                swiperOptionThumbs: {
                    direction: 'vertical',
                    loop: true,
                    loopedSlides: 4, // looped slides should be the same
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                }
            }
        },
        created() {
            setTimeout(function () {
                const swiperTop = vm.$refs.swiperTop.$swiper
                const swiperThumbs = vm.$refs.swiperThumbs.$swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            }, 1000)
        }
    });
</script>
<script asp-location="Footer" asp-order="302">
    function zoomImg(el) {
        var img = el.parentElement.querySelector('img');
        const zoom = mediumZoom(img, { background: '#232323', margin: 30 });
        zoom.open()
    }
</script>